<template>
    <div class="content" id="content" v-html="props.content"></div>
</template>

<script setup>
const props = defineProps({
    content: {
        type: String,
        required: true
    }
})
</script>

<style lang="scss" scoped>
h1 {
    font-size: 24px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

#content {
    line-height: 26px;
    word-break: break-all;
    overflow: auto;
    table {
        display: block;
        width: 100%;
        overflow: auto;
        border-collapse: collapse;
        border-spacing: 0;

        tr {
            background-color: #fff;
            border-top: 1px solid #c6cbd1;

            td,
            th {
                padding: 6px 13px;
                border: 1px solid #dfe2e5;
            }
        }

        tr:nth-child(2n) {
            background-color: #f6f8fa;
        }
    }

    blockquote {
        padding: 0 1em;
        color: #6a737d;
        border-left: 0.25em solid #dfe2e5;
    }
}
</style>